<script>
export default {
  name: "Detail",
  data: function () {
    return {}
  },
  mounted() {
    console.log('@@@组件Detail接受到的参数：', this.$route.params);
  },
  props: ['id', 'author', 'category', 'origin', 'content'],
}
</script>

<template>
  <div>
    <h4>消息编号：{{ $route.params.id }}</h4>
    <h4>消息作者：{{ $route.params.author }}</h4>
    <h4>消息分类：{{ $route.params.category }}</h4>
    <h4>消息题目：{{ $route.params.origin }}</h4>
    <h4>消息内容：{{ $route.params.content }}</h4>
    <hr>

    <!-- 如果路由route里面的props配置为true的话，可以省略$route.params.xxx，直接使用属性的写法 -->
    <!-- 其中props为true只能给params服务，而不能给query服务。 -->
    <h4>消息编号：{{ id }}</h4>
    <h4>消息作者：{{ author }}</h4>
    <h4>消息分类：{{ category }}</h4>
    <h4>消息题目：{{ origin }}</h4>
    <h4>消息内容：{{ content }}</h4>
  </div>
</template>

<style scoped>

</style>